<!---->
<template>
    <div class="news">
        <div class="header">
            <div class="left">
                <img :src="PIC_URL + '/myGoldcoin/xinxi_icon.png'" width="33" height="22">
                <span class="tip">我的信息</span>
            </div>
        </div>
        <div class="info">
            <div class="infoItem">
                <p>
                    <span class="left">真实姓名</span>
                    <span class="right">{{(userInfo.userIdCard&&userInfo.userIdCard.musername)||'-'}}</span>
                </p>
                <p class="details">
                    我的金币：<span>{{totalGoldInfo.totalGold||0}}</span>个
                    <span class="btn" @click="tabChange('gold')">详情</span>
                </p>
            </div>
            <div class="infoItem">
                    <span class="left">手机号</span>
                    <span class="right">{{userInfo.phoneMask}}</span>
            </div>
            <!-- <div class="infoItem">
                    <span class="left">身份证号</span>
                    <span class="right">{{userInfo.userIdCard&&userInfo.userIdCard.idCard||'--'}}</span>
            </div> -->
        </div>
        <p class="title">我的订单</p>
        <div class="orderContainer">
            <div class="table-con">
                <div  class="table" v-if="serviceOrder.length>0">
                    <div class="t-head">
                        <span>产品名称</span>
                        <span>购买时间</span>
                        <span>服务周期</span>
                        <span>状态</span>
                        <span>到期时间</span>
                    </div>
                    <div class="t-data">
                        <div class="tr" v-for="(item,i) in serviceOrder" :key="i">
                            <span>{{item.orderName}}</span>
                            <span>{{item.orderTime&&item.orderTime.split(' ')[0]}}</span>
                            <span>{{item.serviceMonth}}个月</span>
                            <span class="blue">服务中</span>
                            <span>{{item.endTime&&item.endTime.split(' ')[0]}}</span>
                        </div>
                    </div>
                </div>
                <div class="no-data" v-else>暂无订单信息</div>

            </div>
        </div>

    </div>
</template>
<script>
export default {
    props: {
        serviceOrder: {
            type: Array,
            default: ()=> [],
        },
        totalGoldInfo:{
            type: Object,
            default: ()=> {},
        },
        userInfo:{
            type: Object,
            default: ()=> {},
        }
    },
    data() {
        return {
            tableData:[]
        };
    },

    created() {

    },
    mounted() {

    },
    methods: {
        tabChange(d){
            this.$emit('tabChange',d);
        }
    },
};
</script>

<style scoped lang="scss">
.news{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    font-family: Microsoft YaHei;
    font-size: 0;
    .header{
        height: 46px;
        background: #31374D;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 52px 0 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #CFD7E5;
        .left{
            font-weight: bold;
            display: flex;
            align-items: center;
            .tip {
                font-size: 18px;
                font-weight: bold;
                color: #FFB36F;
                margin-right: 30px;
                margin-left: 7px;
            }
            
        }
        
    }
    .info{
        padding: 20px 16px 0;
        border-bottom: 1px solid #CFD7E5;
        box-sizing: border-box;
        .infoItem{
            &:nth-child(1){
                display: flex;
                justify-content: space-between;
            }
            &:nth-child(2){
                margin: 19px 0;
            }
            .left{
                display: inline-block;
                width: 100px;
                height: 32px;
                background: #DDE3ED;
                border-radius: 4px;
                line-height: 32px;
                text-align: center;
                font-size: 16px;
                font-weight: 400;
                color: #51617E;
            }
            .right{
                font-size: 22px;
                color: #333333;
                margin-left: 10px;
            }
            .details{
                font-size: 18px;
                color: #666666;
                span{
                    font-size: 22px;
                    color: #EA2827;
                }
                .btn{
                    cursor: pointer;
                    padding: 7px 16px;
                    background: #E5EFFF;
                    border-radius: 4px;
                    box-sizing: border-box;
                    font-size: 16px;
                    color: #0063FF;
                }
            }
        }
    }
    .title{
        line-height: 44px;
        text-align: center;
        color: #31374D;
        font-size: 18px;
        background: #CFD7E5;
        border-bottom: 1px solid #CFD7E5;
        border-radius: 8px 8px 0px 0px;
        margin: 20px 16px 0 16px;
    }
    .orderContainer{
        border: 1px solid #CFD7E5;
        height: 420px;
        margin: 0  16px 20px;
        border-top:none;
        padding:10px 9px;
        box-sizing: border-box;
        background: #F7F8FA;
        border-radius: 0px 0px 8px 8px;
        .table-con{
            background: #FFFFFF;
            border: 1px solid #CFD7E5;
            border-radius: 8px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            .table {
                width: 100%;
                height: 100%;
                
                .t-head{
                    width: 100%;
                    font-size: 0;
                    background: #FFE7D7;
                    span{
                        display: inline-block;
                        vertical-align: top;
                        width: 20%;
                        text-align: center;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #64432D;
                        line-height: 16px;
                        padding: 15px 0 14px;

                    }
                }
                .t-data{
                    width: 100%;
                    height: calc(100% - 45px);
                    overflow-y: auto;
                    .tr{
                        width: 100%;
                        &:nth-child(even){
                            background:  #EEF0F4;
                        }
                        &:nth-child(odd){
                            background: #FAFBFC;
                        }
                        span {
                            display: inline-block;
                            vertical-align: top;
                            width: 20%;
                            text-align: center;
                            font-size: 16px;
                            font-weight: 400;
                            color: #2C3442;
                            line-height: 16px;
                            padding: 16px 0 13px;
                            &.blue{
                                color: #0063FF;
                            }
                        }
                    }
                }
            }
            .no-data{
                font-size: 18px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #666666;
                line-height: 24px;
            }
        }
        

    }


}

</style>
